<template>
    <VChart :option="options" @click="handleChartClick"/>
</template>

<script setup>
import VChart from "vue-echarts";
import {use} from "echarts";
import {GridComponent} from "echarts/components";
import {LineChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {UniversalTransition} from "echarts/features";
import useSettingsStore from "@/store/modules/settings.js";
import {getSendPoliceTrendOfSendPolice} from "@/api/StatisticAnalysis/CityResumptionChart.js";

use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
const settingsStore = useSettingsStore();

const entries = Array.from({length: 12}, (_, i) => [i + 1, 0]);
const total = ref(entries.reduce((acc, [key, value]) => ({...acc, [key]: value}), {}));

const options = ref({});

onMounted(() => {
    getData()
})

// 获取数据
const getData = async () => {

    const res = await getSendPoliceTrendOfSendPolice();
    res.data.forEach(item => {
        if (total.value.hasOwnProperty(item.months)) total.value[item.months] = item.counts;
    });
    // console.log(total.value, questionable.value)

    setChartsData(
        ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        Object.values(total.value)
    )
}
const handleChartClick = (params) => {
    if (params.componentType === 'series') {
        alert('需要刷新页面');
    }
}

// 设置图表数据
const setChartsData = (xData, thisYear, lastYear) => {
    options.value = {
        title: {
            text: '各市履职趋势图',
            left: 'center',
            top: 0,
            right: 0,
            bottom: 0
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // legend: {
        //     data: ['Evaporation', 'Precipitation'],
        //     left: 'right',
        //     itemGap: 10,
        //     selected: selectedLegend.value
        // },
        // legend: {
        //     data: ['巡查总数', '不规范数'],
        //     // enabled: true,
        //     // floating: true,
        //     left: 'right',
        //     verticalAlign: 'top',
        //     // x: 0,
        //     // y: 0,
        //     itemGap: 10,
        //     // selected: {
        //     //     thisYear: true,
        //     //     lastYear: true
        //     // }
        // },
        grid: {
            left: 0,
            right: 0,
            top: 50,
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xData,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '今年',
                data: thisYear,
                type: 'line',
                smooth: true,
            },
            // {
            //     name: '不规范数',
            //     data: lastYear,
            //     type: 'line',
            //     smooth: true,
            // }
        ]
    }
}
</script>

<style scoped lang="scss">

</style>